import styles from './index.less';
import PropTypes from 'prop-types';
import { Select } from 'antd';

const { Option } = Select;

const LanguageSelect = function (props) {
  const { languageList, onLanguageChange, selectedLocaleFlag } = props

  const languageSelectList = []
  for (const laguageInfo of languageList) {
    languageSelectList.push(
      <Option value={ laguageInfo.code } key={ laguageInfo.code }>{ laguageInfo.name }</Option>
    )
  }
  return (
    <div className={ styles.container }>
      <Select value={ selectedLocaleFlag } style={ { width: 120 } } onChange={ onLanguageChange }>
        { languageSelectList }
      </Select>
    </div>
  );
}

LanguageSelect.propTypes = {
  languageList: PropTypes.array.isRequired,
  onLanguageChange: PropTypes.func.isRequired
}

export default LanguageSelect
